import React, { useState, useEffect } from 'react'
import Retreat from './Retreat'

export default function Meditate() {

  const meditate = [
    { name: '假期后-限免', img: '/public/meditate/1.png' },
    { name: '品茶-限免', img: '/public/meditate/2.png' },
    { name: '宙宇静坐', img: '/public/meditate/3.png' },
    { name: '敷面膜', img: '/public/meditate/4.png' },
    { name: '太空漫步', img: '/public/meditate/5.png' },
    { name: '提升专注', img: '/public/meditate/6.png' },
    { name: '倾听', img: '/public/meditate/7.png' },
    { name: '腿部放松', img: '/public/meditate/8.png' }
  ]


  return (
    <div className='box'>
      <Retreat />
      <h1>冥想</h1>
      <p style={{
        color: '#ccc'
      }}>觉知帮助你活在当下</p>
      <h2 style={{
        marginTop: '1rem'
      }}>
        时刻
        <span style={{
          float: 'right',
          color: 'red',
          fontSize: '1rem'
        }}>更多</span>
      </h2>
      <p style={{
        color: '#ccc'
      }}>随时随刻，开始冥想</p>
      <div style={{
        width: '100%',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between'
      }}>
        {meditate.map((i, ind) => {
          return <dl key={i} style={{
            display: 'inline-block',
            width: '44%',
            borderRadius: '1rem',
            margin: '1rem 0',
            padding: '1rem 0'
          }}>
            <dd style={{
              display: 'inline-block',
              width: '100%',
              height: "6rem",
              borderRadius: '1rem',
            }}>
              <img src={i.img} />
            </dd>
            <dt>
              <h4>{i.name}</h4>
            </dt>
          </dl>
        })}
      </div>

    </div>
  )

}